import React, { useEffect, useRef, useState } from 'react';
import { connect } from 'umi';
import { Modal, Space, Row, Col, Button, Tag } from 'antd';
import TableDataBlock from '@/components/TableDataBlock';
import { secKill_status } from '@/common/contact';
const wePageSelect = (props) => {
  const { visible = false, onClose, wePageType, dispatch, loading, list, pcList, onOk } = props;
  const { show, details = {} } = visible;
  const {} = details;
  const childRef = useRef();
  useEffect(() => {
    if (!show) {
      setSelectedRowKeys([]);
    }
  }, [show]);
  const [selectedRowKeys, setSelectedRowKeys] = useState([]);
  const rowSelection = {
    onChange: (val, selectedRows, info) => {
      setSelectedRowKeys(selectedRows);
    },
    selectedRowKeys: selectedRowKeys.map((item) => {
      return item.id.toString();
    }),
  };
  const searchItems = [{ label: '关键词', name: 'keyword' }];

  const getColumns = [
    {
      title: '页面名称',
      dataIndex: 'pageName',
    },

    {
      title: '创建人',
      dataIndex: 'organizationAdminName',
    },
  ];
  const modalProps = {
    title: `选择微页面`,
    width: 900,
    visible: typeof visible === 'boolean' ? visible : show,
    maskClosable: true,
    destroyOnClose: true,
    zIndex: 1001,
    onOk: () => {
      onOk(selectedRowKeys[0]);
      onClose();
    },
  };

  return (
    <Modal {...modalProps} onCancel={onClose}>
      <Row>
        <Col span={24}>
          <TableDataBlock
            style={{ width: '100%' }}
            rowSelection={{
              type: 'radio',
              ...rowSelection,
            }}
            params={wePageType === 'pc' ? {} : { pageType: 'normal' }}
            cRef={childRef}
            loading={loading}
            searchItems={searchItems}
            columns={getColumns}
            rowKey={(record) => `${record.id}`}
            dispatchType={
              wePageType === 'pc'
                ? 'selectionWindow/fetchListPcPageConfig'
                : 'selectionWindow/fetchPageConfig'
            }
            {...(wePageType === 'pc' ? pcList : list)}
          />
        </Col>
      </Row>
    </Modal>
  );
};

export default connect(({ selectionWindow, loading }) => ({
  list: selectionWindow.pageConfigList,
  pcList: selectionWindow.pcPageConfigList,
  loading: loading.models.selectionWindow,
}))(wePageSelect);
